<template>
    <div>
        <form method="post">
            <textarea id="mytextarea" ref="tinymcecontent"></textarea>
        </form>
    </div>
</template>

<script>
import { getToken, getUserId } from '@/utils/auth'
import { Message, Notification } from 'element-ui'
import api from '@/utils/api'
export default {
    name: 'tinymce',
    data() {
        return {
            form: {
                TitleValue: '',
                TagValue: '',
                CategoryValue: ''
            },
            userId: ''
        }
    },
    created() {
        var token = getToken()
        if (token == undefined) {
            this.$notify({
                title: '提示',
                message: '你还未登录,请登陆后再写文章吧',
                duration: 0
            });
        }
    },

    mounted: function () {
        let that = this
        tinymce.init({
            selector: '#mytextarea',  // change this value according to your HTML,
            language: 'zh-Hans',
            branding: false,
            theme: 'modern',
            height: '500px',
            automatic_uploads: true, // 图片自动上传
            // images_upload_url: 'http://127.0.0.1:8000/file/excel_upload/',
            images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
            //启用工具栏并显示如下项
            toolbar: ['undo redo | styleselect print | bold italic textcolor | link image media code hr',
                'alignleft aligncenter alignright wordcount lists fontsize_formats',
                'searchreplace fullpage help emoticons save'
            ],
            menu: {
                file: { title: 'File', items: 'newdocument restoredraft | preview | export print | deleteallconversations' },
                edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
                view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
                insert: { title: 'Insert', items: 'image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
                format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
                tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
                table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
                help: { title: 'Help', items: 'help' }
            },
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 24pt 36pt",
            menubar: 'file edit insert view format table',
            plugins: 'fontsize_formats emoticons hr image link textcolor media code lists wordcount print searchreplace fullpage help save',
            images_upload_handler: function (blobInfo, succFun, failFun) {
                api.uploadImg(blobInfo.blob()).then(res => {
                    succFun(res.data)
                }).catch(error => {
                    console.log(error)
                })
            },
            save_onsavecallback(data) {
                var content = data.getBody().innerHTML;
                that.publishArticle(content)
            },
            save_oncancelcallback() {
            }
        })
    },
    methods: {
        uploadImg(v) {
            api.uploadImg(v).then(res => {
                return res.data
            }).catch(error => {
                console.log(error)
            })
        },
        getArticleTag(data, userId) {
            this.form = data
            this.userId = userId
        },
        publishArticle(content) {
            var userId = getUserId()
            console.log('userid是', userId)
            if (userId == '' || userId == undefined) {
                userId = -1
            }
            var token = getToken()
            if (token !== undefined) {
                if (this.form.CategoryValue != null || this.form.TagValue != null || this.form.TitleValue != null) {
                    api.publishArticle(userId, this.form.CategoryValue, this.form.TagValue, this.form.TitleValue, content).then(res => {
                        if (res.data == true) {
                            Message({
                                type: 'success',
                                message: '发布文章成功'
                            })
                        }
                    })
                } else {
                    Message({
                        type: 'error',
                        message: '请补充完整文章信息'
                    })
                }
            } else {
                this.$router.push({
                    name: 'login'
                })
                Message({
                    type: 'error',
                    message: '请先登录'
                })
            }

        }
    }
}
</script>

<style>
</style>